<!--文件上传-->
<template>
  <div>
    <el-card class="box-card m-b-10">
      <div slot="header" class="clearfix">
        <span>文件上传</span>
      </div>
      模式1：<SimpleUploader v-model="multiFiles" :catalog="constants.FILE_CATALOG_EXAMPLE" :drop="true" />
      模式2：<SimpleUploader v-model="multiFiles" :catalog="constants.FILE_CATALOG_EXAMPLE" :folder="true" />
      模式3： <SimpleUploader v-model="multiFiles" text="上传PDF" :show-file-list="false" accept="application/pdf" :catalog="constants.FILE_CATALOG_EXAMPLE" @uploadResult="uploadResult" />
      单张图片裁剪(1:1)上传:<SingleImageUpload v-model="file" :catalog="constants.FILE_CATALOG_EXAMPLE" />
      单张图片裁剪(3:2)上传:<SingleImageUpload v-model="file" :catalog="constants.FILE_CATALOG_EXAMPLE" :crop-ratio="3 / 2" desc="单张图片不大于20MB" />
      单张图片上传:<SingleImageUpload v-model="file" :catalog="constants.FILE_CATALOG_EXAMPLE" :crop="false" desc="单张图片不大于20MB" :width="96" />
      多张图片裁剪(1:1)上传:
      <MultipleImageUpload v-model="multiImages" :catalog="constants.FILE_CATALOG_EXAMPLE" />
      多张图片裁剪(5:3)上传:<MultipleImageUpload v-model="multiImages" :crop-ratio="5 / 3" :catalog="constants.FILE_CATALOG_EXAMPLE" :width="108">
        <template slot="top-desc">
          《餐饮服务许可证》或者提供实体店铺的三张照片《包含：1.门头照含店名：2.店内全景照：3.店内收银台照)。<el-link type="primary" :underline="false">点击查看详情</el-link>
        </template>
      </MultipleImageUpload>

    </el-card>
    <el-card class="box-card m-b-10">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="demo">操作按钮</el-button>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{ '列表内容 ' + o }}
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multiFiles: ['f974a55cb2e94b66b32d01eb44fa19f9', '70584217609d4d4e9711bb61ed36a8c3', '3b5db597db4d4e4598a8676449c7e4ee', 'a555f52d1cf14001b5ac731291dec3dd'],
      file: 'f974a55cb2e94b66b32d01eb44fa19f9',
      multiImages: 'f974a55cb2e94b66b32d01eb44fa19f9,70584217609d4d4e9711bb61ed36a8c3,28589f3028b144cd87f4ae89f3b2bc973'
    }
  },
  methods: {
    demo() {
      this.multiFiles = '2e70e085709040a3b136392e6de8530d'
    },
    uploadResult(files) {
      console.log(files)
      this.msgSuccess('文件上传成功回调：' + JSON.stringify(files))
    }
  }

}
</script>

